<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>电影门票分析可视化大屏</title>
    <link rel="stylesheet" href="css/myBigScreen.css">
    <style>
        /* 基础布局样式 */
        .mainbox {
            display: flex;
            gap: 20px;
        }

        .left-column,
        .middle-column,
        .right-column {
            flex: 1;
        }

        /* 左侧布局 */
        .left-column {
            display: flex;
            flex-direction: column;
        }

        .no {
            width: 100%;
            margin-bottom: 20px;
        }

        .left-charts {
            width: 100%;
        }

        /* 中间列布局 */
        .middle-column {
            display: flex;
            flex-direction: column;
        }

        /* 面板样式 */
        .panel {
            margin-bottom: 20px;
        }

        .middle-column .panel {
            margin-bottom: 30px;
        }
    </style>
</head>

<header>
    <h1>电影门票分析可视化大屏</h1>
    <div class="showTime"></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);
        function time() {
            clearTimeout(t);
            dt = new Date()
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.querySelector(".showTime").innerHTML = "当前时间：" + y + '年' + mt + '月' + day + '日 ' + h + '时' + m + '分' + s + '秒'
            t = setTimeout(time, 1000);
        }
    </script>
</header>

<main class="mainbox">
    <div class="left-column">
        <div class="nom">
            <div class="nom-hd">
                <ul>
                    <li>1234567</li>
                    <li>890123</li>
                </ul>
            </div>
            <div class="nom-bd">
                <ul>
                    <li>总售票数</li>
                    <li>今日售票数</li>
                </ul>
            </div>
        </div>
        <div class="left-charts">
            <div class="panel bar">
                <h2>热门电影票房柱状图</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel pie">
                <h2>不同类型电影占比</h2>
                <div class="chart"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
    </div>

    <div class="middle-column">
        <div class="no">
            <div class="no-hd">
                <ul>
                    <li>456789</li>
                    <li>123456</li>
                </ul>
            </div>
            <div class="no-bd">
                <ul>
                    <li>总票房</li>
                    <li>今日票房</li>
                </ul>
            </div>
        </div>

        <div class="panel line" style="width: 100%;">
            <h2>票房趋势折线图</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel age-bar">
            <h2>观众年龄分布</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>

    <div class="right-column">
        <!-- 将影院售票排行条形图放在前面 -->
        <div class="panel bar2" style="width: 100%;">
            <h2>影院售票排行条形图</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <!-- 热门地区分布图放在后面 -->
        <div class="panel map" style="width: 100%;">
            <h2>热门地区分布图</h2>
            <div class="echart">热门地区分布图</div>
        </div>
    </div>
</main>

<body>
<script src="js/flexible.js"></script>
<script src="js/echarts650.min.js"></script>
<script src="js/jquery.js"></script>
<script src="js/china.js"></script>
<script src="js/myBigScreen.js"></script>
</body>

</html>